<template>
  <div>
    <el-table
      border
      style="margin-bottom: 20px;"
      :data="menuPermissionList"
      :expand-row-keys="expandKeys"
      default-expand-all
      row-key="id"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />

      <el-table-column prop="toCode" label="跳转权限值" />
      <el-table-column label="操作">
        <template slot-scope="{row, $index}">
          <!-- :icon="row.level===1 || row.level===2" ? "el-icon-plus" : "el-icon-setting"
                icon="el-icon-plus"
          -->
          <HintButton
            :disabled="row.level===4"
            :title="getAddTitle(row.level)"
            type="primary"
            :icon="row.level===1 || row.level===2 ? 'el-icon-plus' : 'el-icon-circle-plus-outline'"
            size="mini"
            @click="toAddPermission(row)"
          />
          <!-- icon="el-icon-edit" -->
          <HintButton
            :disabled="row.level === 1"
            :title="row.level===4 ? '修改功能' : '修改菜单'"
            type="primary"
            :icon="row.level !==4 ? 'el-icon-edit' : 'el-icon-thumb'"
            size="mini"
            @click="toUpdatePermission(row)"
          />
          <HintButton
            :disabled="row.level===1"
            title="删除"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="removePermission(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogPermissionVisible" :title="dialogTitle" @close="resetData">
      <el-form ref="permission" :model="permission" :rules="permissionRules" label-width="120px">
        <el-form-item v-if="permission.level > 2 && !permission.id" label="父级名称">
          <el-input :value="permission.pname" disabled />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="permission.name" />
        </el-form-item>
        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="permission.code" />
        </el-form-item>
        <el-form-item v-if="permission.level === 4" label="跳转路由权限值" prop="toCode">
          <el-input v-model="permission.toCode" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetData">取 消</el-button>
        <el-button type="primary" @click="addOrUpdatePermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 菜单权限校验的规则
const menuRules = {
  name: [{ required: true, message: '名称必须输入' }],
  code: [{ required: true, message: '权限值必须输入' }]
}
// 按钮功能权限校验的规则
const btnRules = {
  name: [{ required: true, message: '名称必须输入' }],
  code: [{ required: true, trigger: 'blur', message: '功能权限值必须输入' }]
}
export default {
  name: 'PermissionList',
  data() {
    return {
      menuPermissionList: [], // 菜单列表
      expandKeys: [], // 需要自动展开的项
      dialogPermissionVisible: false, // 是否显示菜单权限的Dialog
      permission: {
        // 要操作的菜单权限对象
        level: 0,
        name: '',
        code: '',
        toCode: ''
      }
    }
  },
  computed: {
    // 动态计算得到Dialog的标题
    dialogTitle() {
      // 11
      const { id, level } = this.permission
      if (id) {
        return level === 4 ? '修改功能' : '修改菜单'
      } else {
        return level === 4
          ? '添加功能'
          : `添加 ${level === 2 ? '一级' : '二级'} 菜单`
      }
    },
    // 根据权限的等级来计算确定校验规则
    permissionRules() {
      return this.permission.level === 4 ? btnRules : menuRules
    }
  },
  mounted() {
    this.fetchPermissionList()
  },
  methods: {
    // 根据级别得到要显示的添加dialog的标题
    getAddTitle(level) {
      if (level === 1 || level === 2) {
        return '添加菜单'
      } else if (level === 3) {
        return '添加功能'
      }
    },
    // 请求获取权限菜单数据列表
    async fetchPermissionList() {
      const result = await this.$API.permission1.getPermissionList()
      // console.log('112', result)
      if (result.code === 20000) {
        this.menuPermissionList = result.data.children
        // 需要自动展开的项
        this.expandKeys = [this.menuPermissionList[0].id]
        console.log('this.expandKeys', this.expandKeys)
      }
    },
    // 添加菜单
    toAddPermission(row) {
      console.log('/', row)
      this.dialogPermissionVisible = true
      // this.permission = { ...row }
      this.permission.pid = row.id
      this.permission.level = row.level + 1
      this.permission.type = this.permission.level === 4 ? 2 : 1
      this.permission.pname = row.name // 用于显示父名称, 但提交请求时是不需要的

      // 清除校验(必须在界面更新之后)
      this.$nextTick(() => {
        this.$refs.permission.clearValidate()
      })
    },
    // 显示菜单添加或更新的dialog----修改菜单
    toUpdatePermission(row) {
      this.dialogPermissionVisible = true
      this.permission = { ...row } // 使用浅拷贝
      this.permission.type = this.permission.level === 4 ? 2 : 1

      // 清除校验(必须在界面更新之后)
      this.$nextTick(() => this.$refs.permission.clearValidate())
    },
    // 删除按钮
    removePermission(permission) {
      console.log('删除按钮', permission)
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const result = await this.$API.permission1.removePermission(
            permission.id
          )
          if (result.code === 20000) {
            this.$message.success(result.message || '删除成功!')
            // 刷新页面
            this.fetchPermissionList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 取消
    resetData() {
      //
      this.dialogPermissionVisible = false
      this.permission = {
        level: 0,
        name: '',
        code: '',
        toCode: ''
      }
      // 清除数据
      // Object.assign(this._data, this.$options.data())
    },
    // 确定
    addOrUpdatePermission() {
      //
      this.$refs['permission'].validate(async valid => {
        if (valid) {
          const { pname, ...perm } = this.permission
          // console.log('perm', perm)
          this.dialogUserVisible = false
          const result = await this.$API.permission1.reqAddOrUpdate(perm)
          // console.log('permresult', result)
          if (result.code === 20000) {
            if (perm.id) {
              this.$message({
                message: '修改成功1',
                type: 'warning'
              })
            } else {
              this.$message({
                message: '添加成功1',
                type: 'success'
              })
            }
          }
          this.resetData()
          this.fetchPermissionList()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
